*{
margin:0;
padding:0;

}

p{text-indent:2em}
h1{font-size: medium;}
h2{font-size: small;}

/*body{
    display:flex;
    justify-content:center;
    align-items:center;
    background:#16384c;
}*/

.container
{
    position:relative;
    width:100%;
    height:900px;
   /* background:url('../images/GIF/0.png');*/
    justify-content:center;
     align-items:center;
     flex-wrap:wrap;
     padding: 0px;
}

.container .card
{
    position:absolute;
    top:20px;
   /* left:10px;*/
    width:200px;
    height:180px;
    font-weight:900;
    background-color:#fff;
    margin:30px 10px;
    padding:20px 15px;
    display:flex;
    flex-direction:column;
    box-shadow:0 5px 20px rgba(0,0,0,0.5);
    transition:0.3s ease-in-out;
    cursor: pointer;
}

.frozen:hover
{
    font-size: 75px;
    transition:0.4s ease-in-out;
    
}

.imgBx
{
    position:relative;
    width:210px;
    height:300px;
    top:-60px;
    left:20px;
    box-shadow:0 5px 20px rgba(0,0,0,0.2);
    z-index:1;
}

.imgBx img
{
    max-width:100%;
    height:100%;
    border-radius:4px;
}

.contend
{
    position:relative;
    margin-top:-140px;
    padding: 10px 15px;
    text-align:center;
    color:#111;
    visibility:hidden;
    /*透明*/
    opacity:0;
    transition:0.3s ease-in-out;
}

/*.container .card:hover .contend
{
    margin-top:-30px;
    visibility:visible;
    opacity:1;
    transition-delay:0.3s;
}*/

#wrap
{
    position: absolute;
    top:300px;
    width:1300px;
    height:0px;
    background:#fff;
    margin:30px 10px;
    padding:20px 15px;
    display:flex;
    flex-direction:column;
    /*box-shadow:0 5px 20px rgba(0,0,0,0.5);*/
    transition:0.3s ease-in-out; 
}

#text_1
{
    position: relative;
    height: 0px;
    width: 100%;
}

#text_2
{
    position: relative;
    height: 0px;
    width: 100%;
}

#text_3
{
    position: relative;
    height: 0px;
    width: 100%;
}


@font-face {
    font-family: "frozen";
    src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/Ice%20kingdom%20-%20Bold%20-%20Por%20Kustren.woff");
}

.frozen{
    /* 最初字体样式 */
    font-size: 67px;
    /*font-weight: 900;*/
    /* 使用自定义字体 */
    /*font-family: "frozen", serif;*/
    /* 设置背景图片 */
    background:black;
    background: url(../images/fire.webp);
    /* 设置文字透明且背景按文字区域裁剪 */
    color: transparent;
    -webkit-background-clip: text;
    /* 为了子元素定位 */
    position: relative;
}
.frozen::before {
    /* 获取自定义属性文字 */
    content: attr(data-heading);
    /* 使其和父元素文字重叠 */
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    /* 使用颜色混合模式 */
    mix-blend-mode: screen;
    /* 文字透明 */
    color: transparent;
    /* 设置文字阴影 */
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2),
        -2px 2px 10px rgba(0, 0, 0, 0.2),
        -2px -2px 10px rgba(0, 0, 0, 0.2);
    /* 设置渐变背景 */
    background: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0) 45%,
        rgba(255, 255, 255, 0.8) 50%,
        rgba(255, 255, 255, 0) 55%,
        rgba(255, 255, 255, 0) 100%
    );
    background-size: 200%;
    /* 使用背景图动画 */
    animation: glare 1s infinite;
}

